<template>
	<view class="comment">
		
		<!-- 评价达人 -->
		<view class="seckill-section m-t">
			
			<view class="commentlist">
				
				
				<view class="list-item">
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<text class="name">Leo yo</text>
								<text class="desc">资深买家/昆明</text>
								
								<image src="/static/img/6/6-6.png" mode="aspectFit" class="more-r" @click="detail"></image>
								
							</view>
						</view>
						<view class="image-box">
							<image src="/static/img/1/12.png"></image>
							<image src="/static/img/1/12.png"></image>
							<image src="/static/img/1/12.png"></image>
						</view>
						<view class="size">
							<text class="con">自从两年前在严选给儿子买了一双毛毛虫后就在这里越 陷越深了，儿子和侄儿的鞋今后都会在这买，感谢严选 给我省出了大把时间在网购上，在这不用挑来选去，随 便一双鞋都非常满意，质量超好，天天穿，穿到顶脚都还很新。</text>
						</view>
					</view>
					<view class="option">
						<view class="time">
							1周前
						</view>
						<view class="like">
							<text class="icon-box">
								<image src="/static/img/6/6-7.png" mode="aspectFit"></image>
								<text class="num">7</text>
							</text>
							<text class="icon-box">
								<image src="/static/img/6/6-8.png" mode="aspectFit"></image>
								<text class="num">2</text>
							</text>
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<text class="name">Leo yo</text>
								<text class="desc">资深买家/昆明</text>
								<image src="/static/img/6/6-6.png" mode="aspectFit" class="more-r" @click="detail"></image>
								
							</view>
						</view>
						<view class="image-box">
							<image src="/static/img/1/12.png"></image>
							<image src="/static/img/1/12.png"></image>
							<image src="/static/img/1/12.png"></image>
						</view>
						<view class="size">
							<text class="con">自从两年前在严选给儿子买了一双毛毛虫后就在这里越 陷越深了，儿子和侄儿的鞋今后都会在这买，感谢严选 给我省出了大把时间在网购上，在这不用挑来选去，随 便一双鞋都非常满意，质量超好，天天穿，穿到顶脚都还很新。</text>
						</view>
					</view>
					<view class="option">
						<view class="time">
							1周前
						</view>
						<view class="like">
							<text class="icon-box">
								<image src="/static/img/6/6-7.png" mode="aspectFit"></image>
								<text class="num">7</text>
							</text>
							<text class="icon-box">
								<image src="/static/img/6/6-8.png" mode="aspectFit"></image>
								<text class="num">2</text>
							</text>
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<text class="name">Leo yo</text>
								<text class="desc">资深买家/昆明</text>
								<image src="/static/img/6/6-6.png" mode="aspectFit" class="more-r" @click="detail"></image>
								
							</view>
						</view>
						<view class="image-box">
							<image src="/static/img/1/12.png"></image>
							<image src="/static/img/1/12.png"></image>
							<image src="/static/img/1/12.png"></image>
						</view>
						<view class="size">
							<text class="con">自从两年前在严选给儿子买了一双毛毛虫后就在这里越 陷越深了，儿子和侄儿的鞋今后都会在这买，感谢严选 给我省出了大把时间在网购上，在这不用挑来选去，随 便一双鞋都非常满意，质量超好，天天穿，穿到顶脚都还很新。</text>
						</view>
					</view>
					<view class="option">
						<view class="time">
							1周前
						</view>
						<view class="like">
							<text class="icon-box">
								<image src="/static/img/6/6-7.png" mode="aspectFit"></image>
								<text class="num">7</text>
							</text>
							<text class="icon-box">
								<image src="/static/img/6/6-8.png" mode="aspectFit"></image>
								<text class="num">2</text>
							</text>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<!-- 分享 -->
		<share 
			ref="share" 
			:contentHeight="900"
			:shareList="shareList"
		></share>
		
	</view>
</template>

<script>
	import share from '@/components/share';
	export default {
		components: {
			share
		},
		data() {
			return {
				shareList: [],
				goodsList: [{
						image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
						image2: "http://pic.rmb.bdstatic.com/819a044daa66718c2c40a48c1ba971e6.jpeg",
						image3: "http://img001.hc360.cn/y5/M00/1B/45/wKhQUVYFE0uEZ7zVAAAAAMj3H1w418.jpg",
						title: "古黛妃 短袖t恤女夏装2019新款韩版宽松",
						price: 179,
						sales: 61,
					},
					{
						image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4031878334,2682695508&fm=11&gp=0.jpg",
						image2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554013048&di=a3dc9fd1406dd7bad7fbb97b5489ec04&imgtype=jpg&er=1&src=http%3A%2F%2Fimg009.hc360.cn%2Fhb%2FnKo44ac2656F831c684507E3Da0E3a26841.jpg",
						image3: "http://img.zcool.cn/community/017a4e58b4eab6a801219c77084373.jpg",
						title: "潘歌针织连衣裙",
						price: 78,
						sales: 16,
					},
					{
						image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1620020012,789258862&fm=26&gp=0.jpg",
						image2: "http://m.360buyimg.com/n12/jfs/t247/42/1078640382/162559/3628a0b/53f5ad09N0dd79894.jpg%21q70.jpg",
						image3: "http://ikids.61kids.com.cn/upload/2018-12-29/1546070626796114.jpg",
						title: "巧谷2019春夏季新品新款女装",
						price: 108.8,
						sales: 5,
					}, {
						image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=756705744,3505936868&fm=11&gp=0.jpg",
						image2: "http://images.jaadee.com/images/201702/goods_img/30150_d85aed83521.jpg",
						image3: "http://img13.360buyimg.com/popWaterMark/jfs/t865/120/206320620/138889/dcc94caa/550acedcN613e2a9d.jpg",
						title: "私萱连衣裙",
						price: 265,
						sales: 88,
					}, {
						image: "https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg",
						image2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553418265666&di=d4a7f7eb0ae3c859edeb921641ee1c3a&imgtype=0&src=http%3A%2F%2Fimg003.hc360.cn%2Fy3%2FM02%2FF8%2F9F%2FwKhQh1TuSkGELIlQAAAAAPuLl4M987.jpg",
						image3: "http://img.ef43.com.cn/product/2016/8/05100204b0c.jpg",
						title: "娇诗茹 ulzzang原宿风学生潮韩版春夏短",
						price: 422,
						sales: 137,
					}, {
						image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
						image2: "http://image5.suning.cn/uimg/b2c/newcatentries/0070158827-000000000622091973_2_800x800.jpg",
						image3: "http://img.61ef.cn/news/201903/20/2019032009251784.jpg",
						title: "古黛妃 短袖t恤女夏装2019新款韩版宽松",
						price: 179,
						sales: 95,
					},
				],
				rankingList: [{
						src: "/static/img/1/14.png"
					}, {
						src: "/static/img/1/15.png"
					}, {
						src: "/static/img/1/16.png"
					}, {
						src: "/static/img/1/16.png"
					}, {
						src: "/static/img/1/16.png"
					}, {
						src: "/static/img/1/16.png"
					}


				]
			}
		},
		async onLoad(options){
			
		
			
			
			this.shareList = await this.$api.json('shareList');
		},
		onNavigationBarButtonTap(e) {
			// console.log(e)
			if(e.type === "share"){
				this.$refs.share.toggleMask();
			}
				
		},
		methods:{
			lookall(){
				uni.navigateTo({
					url:`/pages/comment/daren`
				})
			},
			classify(){
				uni.navigateTo({
					url:`/pages/comment/classify`
				})
			},
			detail(){
				uni.navigateTo({
					url:`/pages/comment/detail`
				})
			}
		}


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.people-list {
		padding: 40upx 29upx;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			width: 89upx;
			margin-right: 114upx;
			margin-bottom: 29upx;
		

			image {
				width: 89upx;
				height: 89upx;
				border-radius: 50%;
			}

			text {
				font-size: 20upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				display: block;
				width: 100%;
				text-align: center;
			}
		}

		:nth-child(4n) {
			margin-right: 0;
		}
	}

	.closeall {
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 73upx;
		font-size: 20upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		border-top: 3upx solid #F5F5F5;

		.icon-shang {
			color: #4DC897;
		}
	}



	/* 评价达人 */
	.seckill-section {
		
		margin-top: 21upx;
		.item{
			padding: 4upx 30upx 24upx;
				background: #fff;
		}
		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;
			justify-content: space-between;
			border-bottom: 2upx solid #F5F5F5;

			.title {
				font-size: 25upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
			}

			.look {
				font-size: 23upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(198, 198, 198, 1);
			}

		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			width: 242upx;
			// height: 268upx;
			position: relative;
			text-align: center;
			padding: 20upx 51upx;
			border-right: 1px solid #F5F5F5;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			line-height: 1.8;

			image {
				width: 82upx;
				height: 82upx;
				background: rgba(255, 255, 255, 1);
				border-radius: 50%;
				display: block;

			}

			.name {
				text-align: center;
				display: block;
				font-size: 20upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.fans {
				text-align: center;
				display: block;
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
			}

			.watch {
				text-align: center;
				width: 61upx;
				height: 26upx;
				background: rgba(77, 200, 151, 1);
				border-radius: 10upx;
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}
	}
	.item{
		margin-bottom: 18upx;
	}
	.commentlist{
		background: #F5F5F5;
		
		.title{
			font-size:21upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(102,102,102,1);
			display: block;
			width: 100%;
			background: #fff;
			padding: 26upx;
			text-align: center;
			margin-top: 18upx;
		}
		.header{
			background: #fff;
			font-size:21upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color: #666;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2upx solid #F5F5F5;
			padding: 0 45upx;
			text{
				display: block;
				width:259upx;
				height:35upx;
				padding-bottom: 13upx;
				text-align: center;
				
			}
			.active{
				border-bottom: 2upx solid #4DC897;
				color:rgba(77,200,151,1);
			}
		}
		.list-item{
			margin-bottom: 10upx;
		}
		.eva-section{
			display: flex;
			flex-direction: column;
			padding: 20upx 30upx;
			background: #fff;
			// margin-bottom: 16upx;
			clear: both;
			.space{
				background: $page-color-base;
				height: 20upx;
			}
			.e-header{
				display: flex;
				align-items: center;
				margin-top: 23upx;
				.tit{
					padding: 15upx 18upx;
					font-size:23upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
					background:rgba(255,255,255,1);
					border:1upx solid rgba(153, 153, 153, 1);
					border-radius:28upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
				}
				.active{
					border:1upx solid rgba(77, 200, 151, 1);
					color:rgba(77,200,151,1);
				}
				.level{
					width:100upx;
					height:55upx;
					background:rgba(255,255,255,1);
					border:1upx solid rgba(153, 153, 153, 1);
					border-radius:28upx;
					font-size:23upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
					display: inline-flex;
					justify-content: center;
					align-items: center;
					margin-left: 43upx;
				}
				
				.icon-you{
					margin-left: 10upx;
				}
			}
			.star-show{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size:25upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(102,102,102,1);
				.uni-rate{
					margin: 5upx 20upx 0 20upx;
				}
				
			}
			
			.eva-box{
				display: flex;
				padding: 20upx 0;
				.portrait{
					flex-shrink: 0;
					width: 72upx;
					height: 72upx;
					border-radius: 50%;
				}
				.right{
					flex: 1;
					// display: flex;
					/* flex-direction: column; */
					font-size:25upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
				
					padding-left: 19upx;
					align-items: center;
					position: relative;
					.name{
						display: block;
						line-height:50upx;
					}
					.desc{
						display: block;
						font-size:23upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(153,153,153,1);
						// line-height:84upx;
					}
					.more-r{
						position: absolute;
						right: 0;
						top: 50%;
						width:26upx;
						height:6upx;
					}
				}
				
			}
			
			
			.size{
				padding-left: 91upx;
				.con{
					font-size:23upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
					line-height:1;
				}
			
			}
			
			.image-box{
				margin-top: 20upx;
				padding-left: 91upx;
				
				image{
					width:190upx;
					height:130upx;
					margin-right: 11upx;
					&:nth-child(3n){
						margin-right: 0;
					}
				}
				
			}
			
						
		}
		.option{
			width:100%;
			height:77upx;
			background:rgba(255,255,255,1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2upx solid #F5F5F5;
			padding-left: 121upx;

			.time{
				font-size:23upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(102,102,102,1);
			}
			.like{
				font-size:23upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(181,181,181,1);
				.icon-box{
					margin-right: 50upx;
				}
				image{
					width:33upx;
					height:31upx;
					margin-right: 10upx;
				}
			}
		}
	}
</style>
